$('.btn-group').append('<a id="betterLibrary" class="btn btn-large btn-grey" >Better Library</a>');
$(".btn-grey").first().attr('id', 'normalLibrary');
$('#globalHeader').after('<div id="betterPlayerHolder"><div class = "container" id="betterPlayer">Future home of the constant player</div></div>');

var playImg = chrome.extension.getURL("images/play.png");
var addImg = chrome.extension.getURL("images/add.png");
var infoImg = chrome.extension.getURL("images/info.png");
var removeImg = chrome.extension.getURL("images/remove.png");
var Episodes = [];

$('#betterLibrary').click(function(){
  launchBetterLibrary();
});

makePlayerUI();

function makePlayerUI(){
		$("#betterPlayer").append("<div id='playerSlider'></div>");
		$("#betterPlayer").append("<img id ='playIcon' src=' " + playImg+ "'>"); 
		$( "#playerSlider" ).slider({
		});
}

function Episode(mNumber, mName, mImage, mSummary, mUrl, mTheme){
	this.number = mNumber
	this.name = mName;
	this.image = mImage;
	this.summary = mSummary;
	this.url = mUrl;
	this.theme = mTheme
}

Episode.prototype = {
    constructor: Episode,
    getName:function ()  {
        return this.name;
    },
	getTitle:function () {
		return this.number + ": " + this.name
	},
    getImage:function ()  {
        return this.image;
    },
    getNumber:function ()  {
        return this.number;
    },
    getSummary:function ()  {
        return this.summary;
    },
    getUrl:function ()  {
        return this.url;
    },
	search:function (term) {
		if (this.number.search(term) > -1) return true;
		if (this.name.search(term) > -1) return true;
		if (this.getTitle().search(term) > -1) return true;
		if (this.theme.search(term) > -1) return true;
		if (this.summary.search(term) > -1) return true;
	},
	getElement:function(arrayIndex) {
		return '<li title= "' + this.summary+ '" class="betterEpisodeItem" episodeID="'+ arrayIndex + '"><img style="width:40px" align="left" src=" ' + this.image + '"><h4>' + this.number + ": " + this.name + '</h4><p>' + this.theme + '</p><div><a target="_blank" href="http://aiowiki.com/wiki/' + this.number + '"><span style="float:right"><img src="' + infoImg +'" title="Information"></a><img src="' + addImg+'" title="Add to playlist"></span></li>';
	}
}

function loadClickHandler(){
	$(".betterEpisodeItem").click(function(){
		var id = $(this).attr('episodeID');
		console.log("you clicked to play episode " + id + " it has the title: " + Episodes[id].getTitle() );
	});
}

function launchBetterLibrary(){
	$('#main').empty();
	$('#main').append('<div id ="betterContainer" class = "container"></div>');
	$('#betterContainer').append('<h3 id ="betterLibraryHead">Episodes</h3>');
	$('#betterContainer').append('<ul class="items-list" id="episodeList" style=""></ul>');

	for ( i = 0; i < 10; i++){
		loadEpisodes(Episodes);
	}
	displayEpisodes(Episodes);
	loadClickHandler();
//	betterSearch('God');
	
}

//loads the episodes, temporary hack right now, in future will load
//from a file like dataDump
function loadEpisodes(Episodes){
	firstEpisode = new Episode("727","Your Servant is Listening, Part 1 of 2","http://stream1.focusonthefamily.com/9weTE4ZzotTFQP3j6Re4KFA2BWsMrb5j/promo211070431", "Camilla Parker and her mom, Eva, and grandma, Lucia, journey in the Imagination Station to witness the last judge of Israel and learn about hearing God's voice.", "http://stream1.focusonthefamily.com/IwY2NxZTppbLiMudjf_8gL7EagI6xGKd/DOcJ-FxaFrRg4gtDEwOjN0OjA7p7BAqv.m4a", "Hearing God's Voice");
	secondEpisode = new Episode("728","Your Servant is Listening, Part 2 of 2","http://stream1.focusonthefamily.com/9weTE4ZzotTFQP3j6Re4KFA2BWsMrb5j/promo211070431", "Camilla Parker and her mom, Eva, and grandma, Lucia, journey in the Imagination Station to witness the last judge of Israel and learn about hearing God's voice.", "http://stream1.focusonthefamily.com/IwY2NxZTppbLiMudjf_8gL7EagI6xGKd/DOcJ-FxaFrRg4gtDEwOjN0OjA7p7BAqv.m4a", "Hearing God's Voice");
	Episodes.push(firstEpisode);
	Episodes.push(secondEpisode);
}

//adds the episode elements to the page
function displayEpisodes(Episodes){
	for ( i = 0; i < Episodes.length; i++){
		$('#episodeList').append(Episodes[i].getElement(i));
	}
}

//searchs through episodes for the given term caps results at 10, 
//searches backwards so results are in chronological order logs
//results for now until we build a ui
function betterSearch(term){
	var results = 0;
	for(var i = Episodes.length -1; i>=0 && results < 11; i--) {
		if (Episodes[i].search(term)){
			results++;
			console.log(Episodes[i].getTitle());
		}
	}
}